import EchartsComponent, { MyChartOption } from '@/components/EchartsComponent';
import { getEmptyOptions } from '@/dictionary';
import { dateFormatterMap } from '@/pages/Statistics/Income/components/CommonMap';
import {
  statisticIncomeV2ControllerDayReportGraph as getDayChartData,
  statisticIncomeV2ControllerMonthReportGraph as getMonthChartData,
  statisticIncomeV2ControllerYearReportGraph as getYearChartData,
} from '@/services/ess/statisticIncomeV2';
import { useModel } from '@@/exports';
import { useIntl } from '@umijs/max';
import { Dayjs } from 'dayjs';
import { Moment } from 'moment/moment';
import React, { useRef, useState } from 'react';
import ChartForm from './ChartForm';

interface submitFormObj {
  stationId: string | number;
  date: Date[] | Moment[] | Dayjs[];
  areaIdList: string[] | number[] | null;
}

type IProps = {
  dateType: string;
};
const requestMap = {
  date: getDayChartData,
  month: getMonthChartData,
  year: getYearChartData,
};
const IncomeChart: React.FC<IProps> = (props) => {
  const { dateType } = props;
  const intl = useIntl();
  const [options, setOptions] = useState<MyChartOption>({});
  const { initialState } = useModel('@@initialState');
  const chartRef = useRef(null);
  /**
   * 获得Y轴数据
   * @param options
   */
  const getYaxis = (options: any) => {
    return options?.map((item: any) => {
      return item.yaxis;
    });
  };
  const getSeriesData = (options: any) => {
    return options.map((item) => {
      return {
        name: item.title + (item.deviceName ? '_' + item.deviceName : ''),
        type: 'bar',
        //barWidth: '15%',
        barGap: '10%',
        barMaxWidth: '40',
        data: getYaxis(item.points),
        stack: item.stack,
      };
    });
  };
  const colors = [
    [
      'rgba(110,89,243,1)',
      'rgba(26,85,254,1)',
      'rgba(255,83,83,1)',
      'rgba(255,213,12,1)',
      'rgba(103,194,58,1)',
    ],
    [
      'rgba(110,89,243,0.85)',
      'rgba(26,85,254,0.85)',
      'rgba(255,83,83,0.85)',
      'rgba(255,213,12,0.85)',
      'rgba(103,194,58,0.85)',
    ],
    [
      'rgba(110,89,243,0.7)',
      'rgba(26,85,254,0.7)',
      'rgba(255,83,83,0.7)',
      'rgba(255,213,12,0.7)',
      'rgba(103,194,58,0.7)',
    ],
    [
      'rgba(110,89,243,0.6)',
      'rgba(26,85,254,0.6)',
      'rgba(255,83,83,0.6)',
      'rgba(255,213,12,0.6)',
      'rgba(103,194,58,0.6)',
    ],
    [
      'rgba(110,89,243,0.5)',
      'rgba(26,85,254,0.5)',
      'rgba(255,83,83,0.5)',
      'rgba(255,213,12,0.5)',
      'rgba(103,194,58,0.5)',
    ],
  ];
  const submitForm = (value: submitFormObj) => {
    const params = {
      stationId: initialState?.stationId,
      startDate: value.date[0].format(dateFormatterMap.get(dateType)),
      endDate: value.date[1].format(dateFormatterMap.get(dateType)),
      areaIdList: value.areaIdList,
    };

    requestMap[dateType](params).then((res) => {
      if (res.success && res.data && res.data.xaxis !== null) {
        chartRef?.current?.instance().clear();
        setOptions({
          color: colors.flat(Infinity),
          tooltip: {
            confine: true,
            trigger: 'axis',
            axisPointer: {
              type: 'shadow',
            },
          },
          legend: {
            top: 20,
            right: 0,
            icon: 'rect',
            type: 'scroll',
            orient: 'horizontal',
          },
          grid: {
            left: 25,
            right: 5,
            top: 80,
            bottom: 15,
            containLabel: true,
            show: true,
            borderColor: 'transparent',
          },
          xAxis: [
            {
              type: 'category',
              data: res?.data?.xaxis,
              axisTick: {
                alignWithLabel: true,
                show: false,
                inside: true,
              },

              axisLine: {
                show: true,
                lineStyle: {
                  color: '#ddd',
                },
              },
              axisLabel: {
                color: '#222',
              },
            },
          ],
          yAxis: [
            {
              name: intl.formatMessage({ id: 'statistics.common.unit10K' }),
              nameTextStyle: {
                //y轴上方单位的颜色
                color: '#222',
                align: 'left',
              },
              type: 'value',
              axisLine: {
                show: true,
                lineStyle: {
                  color: '#ddd',
                },
              },
              splitLine: {
                show: true,
                lineStyle: {
                  type: 'dashed',
                },
              },
              axisTick: {
                show: true,
                inside: true,
              },
              axisLabel: {
                color: '#222',
              },
            },
          ],
          series: getSeriesData(res.data.yaxis),
        });
      } else {
        if (
          chartRef?.current?.instance() &&
          chartRef?.current?.instance().getOption()?.series.length !== 0
        ) {
          chartRef?.current?.instance().clear();
        }
        setOptions(getEmptyOptions());
      }
    });
  };
  return (
    <div>
      <ChartForm dateType={dateType} submitForm={submitForm} />
      <div>
        <EchartsComponent
          option={options}
          width={'auto'}
          height={550}
          ref={chartRef}
        ></EchartsComponent>
      </div>
    </div>
  );
};

export default IncomeChart;
